<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import fakeData from './data'

// 模拟数据
const data = reactive<{
  category: any[]
  categoryChild: any[]
  customCategory: any[]
}>({
  category: [],
  categoryChild: [],
  customCategory: [],
})

// 切换导航分类
function onChangeCatagory(index: any) {
  data.categoryChild = [].concat(data.category[index].children as any)
}

// 选择右侧分类
function onChoosePane(e: any) {
  uni.navigateTo({
    url: `/pages/market/products?id=1`,
  })
  window.console.log('click', e)
}

onMounted(() => {
  data.category = fakeData.categoryInfo.category
  data.categoryChild = fakeData.categoryChild
  data.customCategory = fakeData.customCategory
})
</script>

<template>
  <nut-category :category="data.category" @change="onChangeCatagory">
    <nut-category-pane
      :category-child="data.categoryChild"
      @on-change="onChoosePane"
    />
  </nut-category>
</template>

<style lang="scss" scoped></style>

<route lang="json">
{
  "style": {
    "navigationStyle": "default",
    "navigationBarTitleText": "商城"
  }
}
</route>
